<template>
	<l-tab v-model="tabActive" :list="tabList">
		<div v-if="tabActive === 0" class="content">
			<el-button class="mb-[20px]" type="primary" icon="el-icon-plus" @click="handleTelAdd">新增</el-button>
			<el-table ref="template" v-loading="loading" :data="templateList" stripe class="!w-[677px]">
				<el-table-column :formatter="emptyToString" align="center" prop="emplateName" label="模版名称" min-width="200" />
				<el-table-column :formatter="emptyToString" align="center" prop="createTime" label="创建时间" min-width="156">
					<template slot-scope="scope">
						<div class="w-full flex flex-col items-center">
							<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
							<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="操作" width="156">
					<template slot-scope="scope">
						<el-button type="primary" @click="handleTelUpdate(scope.row)">编辑 </el-button>
						<el-button type="danger" @click="handleTelDelete(scope.row)">删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--      自提地址-->
		<selfMention v-if="tabActive === 1"></selfMention>
		<!--     邮费专区-->
		<div v-if="tabActive === 2" class="content">
			<div class="telTitle">模板基础信息</div>
			<div class="telInfo">
				模板名称:
				<el-input v-model.trim="telForm.emplateName" placeholder="请输入模板名称" style="width: 300px" />
				<el-input v-model.trim="telForm.id" type="hidden" />
			</div>
			<div class="telTitle">邮费专区</div>
			<template-zone ref="zone" :tel-id="telForm.id"></template-zone>

			<div style="margin-top: 30px; text-align: center">
				<el-button class="canTeleBut" type="primary" @click="cancelTel">取消</el-button>
				<el-button class="addTelBut" type="primary" @click="submitTelForm">确定</el-button>
			</div>
		</div>
	</l-tab>
</template>

<script>
import { delZone } from '@/api/mall/zone';
import { addTemplate, delTemplate, listTemplate, updateTemplate } from '@/api/mall/template';
import selfMention from './selfMention';
import templateZone from './templateZone';
import dayjs from 'dayjs';
export default {
	name: 'Logistics',
	components: {
		selfMention: selfMention,
		templateZone: templateZone,
	},
	data() {
		return {
			tabActive: 0,
			tabList: ['快递配送', '上门自取', '新增快递配送'],
			dayjs,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			defaultSelect: 1,
			// 总条数
			total: 0,
			templateList: [],
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				type: null,
				title: null,
				content: null,
				tenantId: null,
			},
			idx: 0,
			// 自提表单参数
			form: {},
			// 模板表单参数
			telForm: {},
			temporaryId: 0,
		};
	},
	created() {
		this.getTelList();
	},
	methods: {
		changeidx(value) {
			this.defaultSelect = value;
		},
		/** 搜索快递模板列表 */
		getTelList() {
			this.loading = true;
			listTemplate(this.queryParams).then((response) => {
				this.templateList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		handleTelAdd() {
			this.resetTel();
			this.changeidx(4);
			this.tabActive = 2;
			this.$nextTick(() => {
				this.$refs['zone'].zoneList = [];
			});

			//随机生成模板ID真正生成之后替换
			this.telForm.id = this.getRandom();
			this.temporaryId = this.telForm.id;
		},
		// 取消按钮
		cancelTel() {
			this.changeidx(1);
			this.getTelList();
			console;
			if (this.temporaryId > 0) {
				let ids = [];
				this.$refs['zone'].zoneList.forEach(function (item) {
					ids.push(item.id);
				});
				if (ids.length < 1) {
					return;
				}
				delZone(ids);
			}
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				storeName: null,
				phone: null,
				selfMentionTime: null,
				location: null,
				address: null,
				userId: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				tenantId: null,
			};
			this.resetForm('form');
		},
		resetTel() {
			this.telForm = {
				id: null,
				emplateName: null,
			};
		},
		submitTelForm() {
			let that = this;
			this.telForm.zoneIds = [];
			let count = 0;
			this.tabActive = 2;
			this.$refs['zone'].zoneList.forEach(function (item) {
				that.telForm.zoneIds.push(item.id);
				count += item.provinceIds.split(',').length;
			});

			if (count < this.$refs['zone'].provinceList.length) {
				this.msgError('还有省份未选择，请选择之后保存');
				return;
			}
			if (this.telForm.emplateName == null && this.telForm.emplateName == '') {
				this.msgError('模板名称不能为空');
				return;
			}
			if (this.telForm.id != null && this.temporaryId < 1) {
				updateTemplate(this.telForm).then(() => {
					this.msgSuccess('编辑成功');
					this.changeidx(1);
					this.getTelList();
				});
			} else {
				addTemplate(this.telForm).then(() => {
					this.msgSuccess('新增成功');
					this.changeidx(1);
					this.getTelList();
					this.temporaryId = 0;
				});
			}
		},
		handleTelUpdate(row) {
			this.resetTel();
			this.telForm.id = row.id;
			this.telForm.emplateName = row.emplateName;
			this.changeidx(4);
			this.tabActive = 2;
			this.$nextTick(() => {
				this.$refs['zone'].getZoneList(row.id);
			});
		},
		handleTelDelete(row) {
			let ids = [row.id];
			this.$confirm('是否删除?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delTemplate(ids);
				})
				.then(() => {
					this.getTelList();
					this.msgSuccess('删除成功');
				});
		},

		getRandom: function () {
			//随机生成9位
			let random = Math.floor((Math.random() + Math.floor(Math.random() * 8 + 1)) * Math.pow(8, 9));
			if (random.toString().length > 9) {
				random = Math.floor((Math.random() + Math.floor(Math.random() * 8 + 1)) * Math.pow(8, 9));
			}
			return random;
		},
	},
};
</script>
<style scoped>
.w-full {
	flex: 1;
}

::v-deep .el-dialog__body {
	padding: 30px 40px 30px 30px;
}

::v-deep .el-cascader--medium {
	width: 100%;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
	width: 330px;
}

::v-deep .addZoneBut {
	margin: 20px 30px;
}

::v-deep .addZoneBut .el-button--primary {
	background-color: #6373ee;
	border-color: #6373ee;
}

::v-deep .el-checkbox {
	margin-right: 10px;
	width: 110px;
}
</style>
<style lang="scss" scoped>
.logistics {
	border-left: 1px solid #f3f4f7;
	padding-left: 32px;
	min-height: 100vh;
}
.page-container {
	.nav_box {
		width: 100%;
		margin-bottom: 20px;
		margin-right: 32px;
		border-radius: 8px;
		overflow: hidden;
		cursor: pointer;
		border: 1px solid #4c59c6;

		.box {
			text-align: center;
			line-height: 60px;
			width: 100%;
			height: 60px;
			color: #2c333f;
			background: #ffffff;

			&.active {
				background: rgba(76, 89, 198, 0.2);
				font-weight: bold;
				color: #4c59c6;
			}

			&:last-child {
				border-radius: 0 0 8px 8px;
			}
		}
	}

	.content {
		min-height: auto !important;

		.telInfo {
			//width: 1000px;
			margin: 20px 0px;
		}

		.info {
			//width: 1000px;
			margin: 40px auto 0;

			.ruleForm {
				width: 320px;
				margin: 0 auto;

				.tip {
					color: #808a97;
					font-size: 14px;
					margin-top: 40px;
				}

				.num {
					span {
						color: #f14a46;
						/*padding-left: 18px;*/
					}
				}

				.btn {
					width: 320px;
					height: 44px;
					line-height: 44px;
					background: #6373ee;
					padding: 0;
					text-align: center;
					font-size: 14px;
					opacity: 1;
					margin-top: 60px;
					border: none;
				}
			}
		}

		.telTitle {
			font-size: 18px;
			font-weight: 900;
			color: #333333;
			text-align: left;
			padding-bottom: 10px;
			border-bottom: #cccccc 1px solid;
		}

		.title {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
			text-align: left;
			/*padding-top: 32px;*/
		}
		width: 100%;
		background: #ffffff;
	}
}
</style>
